<template>
	<view class="animated fadeIn fast">
		<!--推荐歌单-->
		<view class="index_recommendSongs">
			<view class="title u-f-ac">
				<image class="title_imgone"
				 mode="widthFix" style="width: 100%" 
				 src="../../../static/icon/cm2_discover_icn_mv@2x.png"   />
				<text class="title_textone">推荐歌单</text>
				<text class="title_texttwo" @tap="togedan">更多</text>
				<image class="title_imgtwo" mode="widthFix"
				 style="width: 100%" :src="genduo"   />
			</view>
			<view class="content">
				<view class="content_item"
				v-for="(item,index) in personalizedlist"
				:key="index" :data-id="item.id" @tap="toplaylist"
				>
					<view class="content_item_img">								
						<image v-if="item.picUrl" 
						lazy-load mode="widthFix" :src="item.picUrl" 
						style="width: 100%" />
						<image v-else mode="widthFix" 
						src="../../../static/icon/m2_default_runfm-ip6@2x.png" 
						style="width: 100%" />
					</view>
					<view class="content_item_name">
						<text class="eps-2">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--推荐新音乐-->
		<view class="index_newsong ">
			<view class="title u-f-ac">
				<image class="title_imgone" 
				mode="widthFix" style="width: 100%"
				 src="../../../static/icon/cm2_discover_icn_newest@2x.png"   />
				<text class="title_textone">最新音乐</text>
				<text class="title_texttwo">更多</text>
				<image class="title_imgtwo" mode="widthFix"
				 style="width: 100%" :src="genduo"   />
			</view>
			<view class="content">
				<view class="content_item"
				v-for="(item,index) in newsongs"
				:key="index"
				>
					<view class="content_item_img">
						<image v-if="item.picUrl" mode="widthFix"
						 lazy-load :src="item.picUrl" 
						 style="width: 100%" />
						<image wx:else mode="widthFix"
						 src="../../../static/cm2_default_recmd_list-ip@2x.png" 
						 style="width: 100%" />
					</view>
					<view class="content_item_name">
						<text class="eps-2">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--主播电台-->
		<view class="index_djprogram">
			<view class="title u-f-ac">
				<image class="title_imgone" 
				mode="widthFix" style="width: 100%" 
				src="../../../static/icon/cm2_discover_icn_radio@2x.png"   />
				<text class="title_textone">主播电台</text>
				<text class="title_texttwo">更多</text>
				<image class="title_imgtwo" 
				mode="widthFix" style="width: 100%" 
				:src="genduo"   />
			</view>
			<view class="content">
				<view class="content_item"
				v-for="(item,index) in djprogram"
				:key="index">
					<view class="content_item_img">
						<image v-if="item.picUrl" 
						mode="widthFix" lazy-load 
						:src="item.picUrl" style="width: 100%" />
						<image v-else mode="widthFix" 
						src="../../../static/cm2_default_act_320@2x.png"
						 style="width: 100%" />
					</view>
					<view class="content_item_name">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--推荐MV-->
		<view class="index_mv">
			<view class="title u-f-ac">
				<image class="title_imgone" mode="widthFix"
				 style="width: 100%" 
				 src="../../../static/icon/cm2_discover_icn_mv@2x.png"   />
				<text class="title_textone">MV</text>
				<text class="title_texttwo">更多</text>
				<image class="title_imgtwo" mode="widthFix"
				 style="width: 100%" :src="genduo"   />
			</view>
			<view class="content">
				<view class="content_item"
				v-for="(item,index) in mv"
				:key="index"
				>
					<view class="content_item_img">
						<image v-if="item.picUrl" mode="widthFix" lazy-load 
						:src="item.picUrl" style="width: 100%" />
						<image v-else mode="widthFix" 
						src="../../../static/icon/cm2_default_act_320@2x.png" style="width: 100%" />
					</view>
					<view class="content_item_name">
						<text class="eps-2">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			personalizedlist:Array,
			newsongs:Array,
			djprogram:Array,
			mv:Array
		},
		data() {
			return {
				genduo:'../../../static/icon/a6a.png'	
			}
		},
		methods: {
			toplaylist(e){
				let {id}=e.currentTarget.dataset;
				uni.navigateTo({
					url:'../playlist/playlist?id='+id
				})
			},
			togedan(){
				this.$emit('togedan')
			}
			
		}
	}
</script>

<style lang="less" scoped>
	text{
		line-height: 32upx;
	}
	.index_recommendSongs{
		width: 100%;
		padding-top: 20upx;
		.title{
			padding: 5upx 0 5upx 10upx;
			display: flex;
			justify-content: center;
			.title_imgone{
				padding: 0 15upx 0 15upx;
				flex: 2;
			}
			.title_textone{
				flex: 30;
				font-size: 26upx;
			}
			.title_texttwo{
				flex: 3;
				font-size: 22upx;
				color:#b2b2b2;
				text-align: right;
			}
			.title_imgtwo{
				flex: 1;
				padding: 10upx;
			}
		}
		.content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.content_item{            
				width: 220upx;
				height: 300upx;
				margin: 15upx 15upx 15upx 15upx;
				.content_item_img{
					width: 220upx;
					height: 220upx;
				}
				.content_item_name{
					padding:10upx 0 0 0;
					width: 100%;
					height: 80upx;
					font-size: 24upx;
				}
			}
		}
	}
	//新歌推荐
	.index_newsong{
		width: 100%;
		padding-top: 20upx;
		.title{
			padding: 5upx 0 5upx 10upx;
			display: flex;
			justify-content: center;
			.title_imgone{
				padding: 0 15upx 0 15upx;
				flex: 2;
			}
			.title_textone{
				flex: 30;
				font-size: 26upx;
			}
			.title_texttwo{
				flex: 3;
				font-size: 22upx;
				color:#b2b2b2;
				text-align: right;
			}
			.title_imgtwo{
				flex: 1;
				padding: 10upx;
			}
		}
		.content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.content_item{            
				width: 220upx;
				height: 300upx;
				margin: 15upx 15upx 15upx 15upx;
				.content_item_img{
					width: 220upx;
					height: 220upx;
				}
				.content_item_name{
					padding:10upx 0 0 0;
					width: 100%;
					height: 80upx;
					font-size: 24upx;
				}
			}
		}
	}
	//主播电台
	.index_djprogram{
		width: 100%;
		padding-top: 20rpx;
		.title{
			padding: 5rpx 0 5rpx 10rpx;
			display: flex;
			justify-content: center;
			.title_imgone{
				padding: 0 15rpx 0 15rpx;
				flex: 2;
			}
			.title_textone{
				flex: 30;
				font-size: 26rpx;
			}
			.title_texttwo{
				flex: 3;
				font-size: 22rpx;
				color:#b2b2b2;
				text-align: right;
			}
			.title_imgtwo{
				flex: 1;
				padding: 10rpx;
			}
		}
		.content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.content_item{            
				width: 220rpx;
				height: 300rpx;
				margin: 15rpx 15rpx 15rpx 15rpx;
				.content_item_img{
					width: 220rpx;
					height: 220rpx;
				}
				.content_item_name{
					padding:10rpx 0 0 0;
					width: 100%;
					height: 80rpx;
					font-size: 24rpx;
					text{
						display: -webkit-box;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}
	}
	//推荐mv
	.index_mv{
		width: 100%;
		padding-top: 20rpx;
		.title{
			padding: 5rpx 0 5rpx 10rpx;
			display: flex;
			justify-content: center;
			.title_imgone{
				padding: 0 15rpx 0 15rpx;
				flex: 2;
			}
			.title_textone{
				flex: 30;
				font-size: 26rpx;
			}
			.title_texttwo{
				flex: 3;
				font-size: 22rpx;
				color:#b2b2b2;
				text-align: right;
			}
			.title_imgtwo{
				flex: 1;
				padding: 10rpx;
			}
		}
		.content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.content_item{            
				width: 345rpx;
				margin: 15rpx 15rpx 15rpx 15rpx;
				.content_item_img{
					width: 345rpx;
				}
				.content_item_name{
					padding:0 0 0 0;
					width: 100%;
					height: 30rpx;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
